<!--#include file="lib/utf-8.asp"-->
<!--#include file="lib/asp-common-lib.asp"-->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EOC监控系统</title>
<!--#include file="lib/plugins.asp"-->
<!--[if IE]><script language="javascript" type="text/javascript" src="lib/jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jqplot/jquery.jqplot.min.css" />

<style type="text/css">
  .ui-datepicker table {
    border: 0;
  }
  #chart{
    width:1000px;
    height:640px;
  }
  #bar{
    width:1000px;
  }
  #loading{
    display:none;
    float:left;
  }
</style>
<script type="text/javascript">
  $(function() {
        $.ajaxSetup ({
            cache: false, //关闭AJAX相应的缓存
            beforeSend:function() {
                $("#loading").show();
                //$("#bt_search").attr("disabled",true);
            },
            complete:function() {
                $("#loading").hide();
                //$("#bt_search").attr("disabled",false);
            }
        });
        ndflowid=$("#ndflowid").val();
        dataDay=$("#dataDay").val();
        ndip=$("#ndip").html();
        rd(dataDay);
        $("#dataDay").change(function(){
            dataDay=$("#dataDay").val();
            $("#chart").html("");
            rd(dataDay);
        });
        function rd(dataDay){
            //直接用asp输出json数据，精简到一条记录3个数据，整个一天数据大概还需要3-4秒中才能输出完毕
            //$.getJSON("jqplot_json_ndflow.asp?ndflowid="+ndflowid+"&dataDay="+dataDay,function(data){
            //改用web.py做REST服务，输出json数据在800-900ms内，不过需要调用jsonp方式
            $.ajax({
                url:"http://192.168.20.35:81/ndflowlog",
                //url:"http://localhost:8080/ndflowlog",
                data:{ndflowid:ndflowid,dataDay:dataDay},
                dataType:"jsonp",
                jsonp:"callback"
            }).done(function(data){
                //success:function(data){
                //$.jqplot.config.enablePlugins = true;
                
                //整理获取的json数据
                var l,rx,tx,all,icpe;
                rx=[];
                tx=[];
                all=[];
                icpe=[];
                l=data.length;
                //alert(l);
                for(var i=0;i<l;i++){
                    rx.push([data[i][2],data[i][0]]);
                    tx.push([data[i][2],data[i][1]]);
                    all.push([data[i][2],data[i][0]+data[i][1]]);
                    icpe.push([data[i][2],data[i][3]]);
                
                }
                
                
                plot1=$.jqplot('chart',  [all,rx,tx,icpe],{
                    //title:ndip,
                    //动画方式，比较耗费浏览器时间，建议关闭
                    animate: true,
                    animateReplot: true,
                    seriesDefaults:{
                        //showLine:true,
                        rendererOptions: {
                            //平滑方式，比较耗费浏览器时间，建议关掉
                            smooth: true
                        },
                        lineWidth:1,
                        showMarker:false
                    },
                    axes:{
                        xaxis:{
                            renderer:$.jqplot.DateAxisRenderer,
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                            min:all[0][0],
                            //tickInterval: '1 day',
                            tickOptions:{
                                formatString :'%Y-%m-%d %H:%M:%S',
                                angle:-30,
                            },
                            pad: 0
                        }, 
                        yaxis:{
                            min:0,
                            //tickInterval: 5000,
                            tickOptions:{
                                formatString:'%d Kbps'
                            },
                            //label:'Kbps',
                            //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        y2axis:{
                            min:0,
                            //tickInterval: 5000,
                            tickOptions:{
                                formatString:'%d'
                            },
                            //label:'Kbps',
                            //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                    },
                    highlighter: {
                        show: true,
                        sizeAdjust: 5
                    },
                    cursor: {
                        show: true,
                        zoom: true
                    },
                    series:[
                        {
                            label:'ALL',
                            xaxis: 'xaxis',
                            yaxis: 'yaxis'
                        },
                        {
                            label:'RX',
                            xaxis: 'xaxis',
                            yaxis: 'yaxis'
                        },
                        {
                            label:'TX',
                            xaxis: 'xaxis',
                            yaxis: 'yaxis'
                        },
                        {
                            label: 'CPE',
                            xaxis: 'xaxis',
                            yaxis: 'y2axis'
                        }
                    ],
                    legend: { show:true, location: 'ne' }
                });
                $(".dataSeries").change(function(){
                    if($("#ALL").get(0).checked===true){
                        plot1.series[0].show=true;
                    }else{
                        plot1.series[0].show=false;
                    }
                    if($("#RX").get(0).checked===true){
                        plot1.series[1].show=true;
                    }else{
                        plot1.series[1].show=false;
                    }
                    if($("#TX").get(0).checked===true){
                        plot1.series[2].show=true;
                    }else{
                        plot1.series[2].show=false;
                    }
                    plot1.replot();
                });
                //}
            });
        }

  });
</script>
<!--#include file="lib/js-google-analytics.asp"-->
</head>
<%
Set conn_ndflow = Server.CreateObject("ADODB.CONNECTION")
db_ndflow = "DRIVER=SQLite3 ODBC Driver;Database="&Server.MapPath("ndflow.db3")
conn_ndflow.Open db_ndflow

' if not CheckPostFlag(session("aaPostFlag"),1,3) then call JumpErrorPage(2)

ndflowid=saferequest("ndflowid",1)
%>
<body>
<input type="hidden" name="ndflowid" id="ndflowid" value="<%=ndflowid%>" />
<table id="bar">
<tr>
<%
    sql = "select * from ndflow where id="&ndflowid
    Set rs = Server.CreateObject("ADODB.Recordset")
    rs.Open sql,conn_ndflow,1,1
    if not rs.eof then
%>
<td>NDIP</td>
<td id="ndip"><%=rs("ndip")%></td>
<td>监控端口</td>
<td>
<%
    select case rs("iport")
        case 1:response.write("同轴口")
        case 2:response.write("以太口")
    end select
%>
</td>
<td>开始时间</td>
<td><%=rs("dtStart")%></td>
<td>结束时间</td>
<td><%=rs("dtEnd")%></td>
<td>监控状态</td>
<td>
<%
thistime=now

if thistime<rs("dtStart") then response.write("未开始")
if thistime>rs("dtEnd") then response.write("已结束")
if thistime>rs("dtStart") and thistime<rs("dtEnd") then response.write("监控中")

%>
</td>
<td>
显示控制
</td>
<td>
<select id="dataDay" name="dataDay">
<%
    sql = "select date(dtlog) as dataday from ndflowlog where ndflowid="&ndflowid&" group by date(dtlog) order by date(dtlog) desc"
    Set rs_day = Server.CreateObject("ADODB.Recordset")
    rs_day.Open sql,conn_ndflow,1,1
    do while not rs_day.eof
%>
    <option value="<%=rs_day("dataday")%>"><%=rs_day("dataday")%></option>
<%
        rs_day.movenext
    loop
    rs_day.close
    set rs_day=nothing
%>    
    <option value="ALL">ALL</option>
</select>
<input type="checkbox" class="dataSeries" id="ALL" checked="checked" />ALL
<input type="checkbox" class="dataSeries" id="RX" checked="checked" />RX
<input type="checkbox" class="dataSeries" id="TX" checked="checked" />TX
</td>
<%
    end if
    rs.close
    set rs=nothing

%>
</tr>
</table>
<div id="loading">Loading...</div>
<div id="chart"></div>
</body>
</html>
<%
conn_ndflow.close
set conn_ndflow=nothing

%>

